<template>

  <transition name="fade">
    <div v-if="visible" class="sidebar ">

      <el-row class="container desktop-navbar">
        <el-col>
          <el-menu default-active="2" class="el-menu-vertical-demo" background-color="transparent" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="/"><i class="el-icon-s-comment"></i>主页</el-menu-item>
            <el-menu-item index="/#" ><i class="el-icon-s-comment"></i>留言</el-menu-item>
            <el-menu-item index="/#"><i class="el-icon-s-promotion"></i>记录</el-menu-item>
            <el-menu-item index="/Photo"><i class="fa fa-wa fa-cny"></i>
              赞赏</el-menu-item>
            <el-menu-item index="/Friendslink" @click="Friendslink()"><i class="fa fa-wa fa-users"></i>友链</el-menu-item>
            <el-submenu index="1">
              <template slot="title"><i class="fa fa-wa fa-archive"></i>
                分类</template>
              <el-menu-item-group v-for="(item, index) in classListObj" :key="'class1' + index"
                :index="'/Share?classId=' + item.id" background-color="inherit">{{ item.name
                }}</el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
      <button @click="close">Close</button>
    </div>
  </transition>
</template>

<script>
export default {
  data:{
    userInfo: '', //用户信息
			haslogin: false, //是否已登录
			classListObj: '', //分类
			activeIndex: '/', //当前选择的路由模块
			state: '', //icon点击状态
			pMenu: true, //手机端菜单打开
			// path:'',//当前打开页面的路径
			input: '', //input输入内容
			headBg: 'url(static/img/headbg05.jpg)', //头部背景图
			headTou: '', //头像
			projectList: '',//项目列表
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('close');
    },
    goToAbout() {
      this.$router.push('/Friendslink');
    },
    getCategoryList() {
			getCategoryList().then((response) => {
				this.classListObj = response
			})
    },
    userlogout: function () {
			var that = this;
			this.$confirm('是否确认退出?', '退出提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// console.log(that.$route.path);

				logout().then((response) => {
					removeToken()
					localStorage.removeItem('userInfo');
					that.haslogin = false;
					window.location.reload();
					that.$message({
						type: 'success',
						message: '退出成功!'
					});
					if (that.$route.path == '/UserInfo') {
						that.$router.push({
							path: '/'
						});
					}
				})
			}).catch(() => {
				//
			});
		},
    routeChange: function () {
			var that = this;
			that.pMenu = true
			this.activeIndex = this.$route.path == '/' ? '/Home' : this.$route.path;
			if (localStorage.getItem('userInfo')) { //存储用户信息
				that.haslogin = true;
				that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
				// console.log(that.userInfo);
			} else {
				that.haslogin = false;
			}
			//获取分类
			this.getCategoryList()
			if ((this.$route.name == "Share" || this.$route.name == "Home") && this.$store.state.keywords) {
				this.input = this.$store.state.keywords;
			} else {
				this.input = '';
				this.$store.state.keywords = '';
			}
		},
  }
};
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-image: url(../../static/img/sidbar.webp);
  background-size: cover;
  /* 设置背景图片的位置，例如从顶部中心开始显示 */
  background-position: right center;
  /* 确保背景图片不随页面其余部分滚动 */
  background-attachment: fixed;
  /* 使背景图片始终显示，即使内容高度大于窗口 */
  background-repeat: no-repeat;
  overflow-y: auto;
  /* Add more styles for sidebar */
}

.blackbackground {
  background-color: rgba(0, 0, 0, 0.8);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>